<script setup>

import {ref} from "vue";

const isShowChoose = ref(false)
const props = defineProps({
  sortType: {
    type: Number,
    default: 0
  },
  type1: {
    type: Number,
    default: 1,
  },
  type2: {
    type: Number,
    default: 1
  },
  type3: {
    type: Number,
    default: 1
  },
  type4: {
    type: Number,
    default: 0
  },
  newShop: {
    type: Number,
    default: 0
  },
  overlordMealClassList: {
    type: Array
  }
})
const emits = defineEmits(['update:sortType', 'update:type1', 'update:type2', 'update:type3', 'change', 'sortChange', 'update:type4', 'update:newShop'])
// 推荐选中图标颜色
const filter_color = ref('#FF800E')
const checkShop = (type) => {
  console.log('checkShop', type)
  if (type === 0 ) {
    console.log('综合排序', type)
    filter_color.value = '#FF800E'
    emits('update:sortType', type)
    emits('change', type)
    return
  }
  if (type === 3) {
    console.log('距离优先', type)
    filter_color.value = '#666666'
    emits('update:sortType', type)
    emits('change', type)

    return
  }
  if (type === 4) {
    console.log('高返优先', type)
    filter_color.value = '#666666'
    emits('update:sortType', type)
    emits('change', type)
    return
  }
  if (type === 6) {
    console.log('无需评价', type)
    filter_color.value = '#666666'
    emits('update:sortType', type)
    emits('change', type)
    return
  }
  if (type === 2) {
    console.log('官返商家', type)
    filter_color.value = '#666666'
    emits('update:sortType', type)
    emits('change', type)
    return
  }
  filter_color.value = '#FF800E'

  // reset()
}
</script>

<template>
  <view class="search_sort">
    <view class="search_sort_box">
      <scroll-view scroll-x="true" style="white-space: nowrap;">
        <view @tap="checkShop(0)" data-type=0 :class="[sortType === 0 ?'checkShopType':'btnmoren']" >
          综合排序
        </view>
        <view @tap="checkShop(3)" data-type=3 :class="[sortType === 3 ?'checkShopType':'btnmoren']">
          距离优先
        </view>
        <view @tap="checkShop(4)" data-type=4 :class="[sortType === 4 ?'checkShopType':'btnmoren']">
          高返优先
        </view>
        <view @tap="checkShop(6)" data-type=6 :class="[sortType === 6?'checkShopType':'btnmoren']">
          无需评鉴
        </view>
        <view @tap="checkShop(2)" data-type=2 :class="[sortType === 2?'checkShopType':'btnmoren']">
          官返
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.search_sort{
  padding: 0 20rpx;
  // background: #FFFFFF;
  .search_sort_box{
    font-size: 26rpx;
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
    .checkShopType {
      height: 34rpx;
      line-height: 34rpx;
      color: #FF7900;
      background: #FFF7EF;
      border: 2rpx solid #FFBC7E;
      border-radius: 10rpx;
      text-align: center;
      font-size: 24rpx;
      padding: 12rpx 18rpx;
      margin: 0 10rpx;
      display: inline-block;
    }
    .checkShopType:first-child{
      margin-right: 10rpx;
    }
    .btnmoren {
      color: #222;
      background: #FFFFFF;
      border-radius: 10rpx;
      padding: 14rpx 20rpx;
      margin: 0 10rpx;
      text-align: center;
      font-size: 24rpx;
      height: 30rpx;
      line-height: 30rpx;
      display: inline-block;
    }
    .btnmoren:first-child{
      margin-right: 10rpx;
    }
    .btnmoren1 {
      margin: 6rpx 0;
      color: #999999;
      border: #BBBBBB 1rpx solid;
      background-color: #ffffff;
      border-radius: 10rpx;
      text-align: center;
      font-size: 24rpx;
      padding: 10rpx 26rpx;
      display: inline-block;
    }

  }
}

</style>